    *{margin: 0;padding: 0;}
    body{
        background: url(./img/bg1.jpg) no-repeat center center fixed;
        background-size: cover;
        overflow:hidden hidden;
    }
    img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .space{
        background-color:#00000070;
        width: 100%;
        height: 100%;
        border: 1px black solid;
        margin: 30px auto;
        perspective: 600px;
    }
    ul{ 
        top: -800px;
        width: 240px;
        height: 160px;
        margin: 0px auto;
        list-style-type:none;
        position: relative;
        transform-style: preserve-3d;
        transition: 20s ;
        transition-timing-function: linear;
    }
    li{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        /* margin: auto auto; */
    }
    ul li:nth-child(1){
        transform: rotateY(0deg) translateZ(600px);
    }
    ul li:nth-child(2){
        transform: rotateY(36deg) translateZ(600px);
    }
    ul li:nth-child(3){
        transform: rotateY(72deg) translateZ(600px);
    }
    ul li:nth-child(4){
        transform: rotateY(108deg) translateZ(600px);
    }
    ul li:nth-child(5){
        transform: rotateY(144deg) translateZ(600px);
    }
    ul li:nth-child(6){
        transform: rotateY(180deg) translateZ(600px);
    }
    ul li:nth-child(7){
        transform: rotateY(216deg) translateZ(600px);
    }
    ul li:nth-child(8){
        transform: rotateY(252deg) translateZ(600px);
    }
    ul li:nth-child(9){
        transform: rotateY(288deg) translateZ(600px);
    }
    ul li:nth-child(10){
        transform: rotateY(324deg) translateZ(600px);
    }

    .space:hover ul{
        transform: rotateY(360deg);
    }
    .space:hover #one{
        transform: rotateY(-360deg);
    }
    .space:hover #two{
        transform: rotateY(360deg);
    }
    .space:hover #three{
        transform: rotateY(-360deg);
    }
    .space:hover #frou{
        transform: rotateY(360deg);
    }
    .space:hover #five{
        transform: rotateY(-360deg);
    }
    .space:hover #q1{
        transform: rotateY(360deg);
    }
    .space:hover #q2{
        transform: rotateY(-360deg);
    }
    .space:hover #q3{
        transform: rotateY(360deg);
    }
    .space:hover #q4{
        transform: rotateY(-360deg);
    }
    .space:hover #q5{
        transform: rotateY(360deg);
    }
    .space:hover #q6{
        transform: rotateY(-360deg);
    }
    
    #one{
        margin: 10px auto;
    }
    #two{
        margin: 10px auto;
    }
    #three{
        margin: 10px auto;
    }
    #frou{
        margin: 10px auto;
    }
    #five{
        margin: 10px auto;
    }
    #q1{margin: 10px auto;}
    #q2{margin: 10px auto;}
    #q3{margin: 10px auto;}
    #q4{margin: 10px auto;}
    #q5{margin: 10px auto;}
    #q6{margin: 10px auto;}